<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Device contexts in wxWidgets</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="wxWidgets, tutorial, First programs, C++, programming, 
GUI, Device Contexts, multiplatform">
<meta name="description" content="This part of the wxWidgets tutorial covers device contexts.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Device Contexts</h1>


<p>
The <b>GDI</b> (<b>Graphics Device Interface</b>) is an interface for working 
with graphics. It is used to interact with graphic devices such as monitor, 
printer or a file. The GDI allows programmers to display data on a screen or 
printer without having to be concerned about the details of a particular device. 
The GDI insulates the programmer from the hardware. 
</p>


<img src="/img/gui/wxwidgets/gdi.png" alt="The GDI">
<div class="figure">Figure: The GDI structure</div>

<p>
From the programmer's point of view, the GDI is a group of classes and methods 
for working with graphics. The GDI consists of 2D Vector Graphics, Fonts and Images.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
To begin drawing graphics, we must create a device context (DC) object. In 
wxWidgets the device context is called wxDC. The documentation defines wxDC as 
a device context onto which which graphics and text can be drawn. It represents 
number of devices in a generic way. Same piece of code can write to different 
kinds of devices. Be it a screen or a printer. The wxDC is not intended to be 
used directly. Instead a programmer should choose one of the derived classes. 
Each derived class is intended to be used under specific conditions.
</p>

<p>
Derived wxDC classes
</p>

<ul>
<li>wxBufferedDC</li>
<li>wxBufferedPaintDC</li>
<li>wxPostScriptDC</li>
<li>wxMemoryDC</li>
<li>wxPrinterDC</li>
<li>wxScreenDC</li>
<li>wxClientDC</li>
<li>wxPaintDC</li>
<li>wxWindowDC</li>
</ul>

<p>
The wxScreenDC is used to draw anywhere on the screen. The wx.WindowDC is 
used if we want to paint on the whole window (Windows only). This includes 
window decorations. The wxClientDC is used to draw on the client area of a 
window. The client area is the area of a window without it's decorations 
(title and border). The wxPaintDC is used to draw on the client area as well. 
But there is one difference between the wxPaintDC and the wxClientDC. 
The wxPaintDC should be used only from a wxPaintEvent. The wxClientDC 
shoud not be used from a wxPaintEvent. The wxMemoryDC is used to draw 
graphics on the bitmap. The wxPostScriptDC is used to write to PostScript 
files on any platform. The wxPrinterDC is used to access a printer 
(Windows only). 
</p>


<h4>Simple line</h4>

<p>
We begin with drawing a line.
</p>

<div class="codehead">line.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Line : public wxFrame
{
public:
    Line(const wxString&amp; title);

    void OnPaint(wxPaintEvent&amp; event);

};
</pre>

<div class="codehead">line.cpp</div>
<pre class="code">
#include "line.h"


Line::Line(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(280, 180))
{
  this->Connect(wxEVT_PAINT, wxPaintEventHandler(Line::OnPaint));
  this->Centre();
}

void Line::OnPaint(wxPaintEvent&amp; event)
{
  wxPaintDC dc(this);
  
  wxCoord x1 = 50, y1 = 60;
  wxCoord x2 = 190, y2 = 60;

  dc.DrawLine(x1, y1, x2, y2);
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "line.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{

    Line *line = new Line(wxT("Line"));
    line->Show(true);

    return true;
}
</pre>

<p>
In our example, we draw a simple line onto the client area of the window. 
If we resize the window, it is redrawn. 
An <i>wxPaintEvent</i> is generated. And the line is drawn again. 
</p>

<pre class="explanation">
void OnPaint(wxPaintEvent&amp; event);
</pre>

<p>
Here we declare a <i>OnPaint()</i> event handler function. 
</p>

<pre class="explanation">
this->Connect(wxEVT_PAINT, wxPaintEventHandler(Line::OnPaint));
</pre>

<p>
We connect a paint event to the <i>OnPaint()</i> method. All the drawing 
happens inside the <i>OnPaint()</i> event handler.
</p>

<pre class="explanation">
wxPaintDC dc(this);
</pre>

<p>
We define a <i>wxPaintDC</i> device context. It is a device context, 
that is used to draw on the window inside the
<i>wxPaintEvent</i>
</p>

<pre class="explanation">
wxCoord x1 = 50, y1 = 60;
wxCoord x2 = 190, y2 = 60;
</pre>

<p>
We define four coordinates.
</p>

<pre class="explanation">
  dc.DrawLine(x1, y1, x2, y2);
</pre>

<p>
We draw a simple line calling the <i>DrawLine()</i> method.
</p>

<img src="/img/gui/wxwidgets/line.png" alt="Line">
<div class="figure">Figure: A simple line</div>


<h2>Drawing text</h2>

<p>
Drawing some text on the window is easy.
</p>

<div class="codehead">text.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Text : public wxFrame
{
public:
    Text(const wxString &amp; title);

    void OnPaint(wxPaintEvent &amp; event);

};
</pre>

<div class="codehead">text.cpp</div>
<pre class="code">
#include "text.h"


Text::Text(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 150))
{
  Connect(wxEVT_PAINT, wxPaintEventHandler(Text::OnPaint));
  Centre();
}

void Text::OnPaint(wxPaintEvent&amp; event)
{
  wxPaintDC dc(this);

  dc.DrawText(wxT("Лев Николaевич Толстoй"), 40, 60);
  dc.DrawText(wxT("Анна Каренина"), 70, 80);
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};

</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "text.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{

    Text *text = new Text(wxT("Text"));
    text->Show(true);

    return true;
}
</pre>


<p>
In our example, we draw text Lev Nikolayevich Tolstoy, Anna Karenina in 
Russian azbuka onto the window.
</p>


<pre class="explanation">
  dc.DrawText(wxT("Лев Николaевич Толстoй"), 40, 60);
  dc.DrawText(wxT("Анна Каренина"), 70, 80);
</pre>

<p>
The <i>DrawText()</i> method draws text on the window. It Draws a text 
string at the specified point, using the current text font, and the 
current text foreground and background colours. Thanks to the 
<i>wxT()</i> macro, we can use azbuka directly in the
code. The wxT() macro is identical to <i>_T()</i> macro. It wraps 
string literals for use with or without Unicode. When
Unicode is not enabled, wxT() is an empty macro. When Unicode is 
enabled, it adds the necessary L for the string literal to become a 
wide character string constant.
</p>


<img src="/img/gui/wxwidgets/text.jpg" alt="Drawing text">
<div class="figure">Figure: Drawing text</div>


<h4>Point</h4>

<p>
The simplest geometrical object is a point. It is a plain dot on the window.
</p>

<pre class="definition">
DrawPoint(int x, int y)
</pre>

<p>
This method draws a point at x, y coordinates. 
</p>

<div class="codehead">point.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Points : public wxFrame
{
public:
    Points(const wxString &amp; title);

    void OnPaint(wxPaintEvent &amp; event);

};
</pre>

<div class="codehead">points.cpp</div>
<pre class="code">
#include "points.h"
#include &lt;stdlib.h&gt;
#include &lt;time.h&gt;


Points::Points(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(280, 180))
{

  this->Connect(wxEVT_PAINT, wxPaintEventHandler(Points::OnPaint));
  srand(time(NULL));
  this->Centre();
}

void Points::OnPaint(wxPaintEvent &amp; event)
{
  wxPaintDC dc(this);
  
  wxCoord x = 0;
  wxCoord y = 0;

  wxSize size = this->GetSize();

  for (int i = 0; i<1000; i++) {
      x = rand() % size.x + 1;
      y = rand() % size.y + 1;
      dc.DrawPoint(x, y);
  }
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "points.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{

    Points *points = new Points(wxT("Points"));
    points->Show(true);

    return true;
}
</pre>


<p>
A single point might be difficult to see. So we create 1000 points. Each 
time the window is resized, we draw 
the 1000 points over the client area of the window.
</p>

<pre class="explanation">
wxSize size = this->GetSize();
</pre>

<p>
Here we get the size of the window. 
</p>

<pre class="explanation">
x = rand() % size.x + 1;
</pre>

<p>
Here we get a random number in the range of 1 to size.x.
</p>


<img src="/img/gui/wxwidgets/points.png" alt="Points">
<div class="figure">Figure: Points</div>


<h2>Pen</h2>

<p>
Pen is an elementary graphics object. It is used to draw lines, curves and outlines 
of rectangles, ellipses, polygons or other shapes.
</p>


<pre class="definition">
 wxPen(const wxColour&amp; colour, int width = 1, int style = wxSOLID)
</pre>


<p>
The wxPen constructor has three parameters. Colour, width and style. 
Follows a list of possible pen styles.
Pen styles
</p>

<ul>
<li>wxSOLID</li>
<li>wxDOT</li>
<li>wxLONG_DASH</li>
<li>wxSHORT_DASH</li>
<li>wxDOT_DASH</li>
<li>wxTRANSPARENT</li>
</ul>


<div class="codehead">pen.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Pen : public wxFrame
{
public:
    Pen(const wxString&amp; title);

    void OnPaint(wxPaintEvent&amp; event);

};
</pre>

<div class="codehead">pen.cpp</div>
<pre class="code">
#include "pen.h"


Pen::Pen(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(360, 180))
{
  this->Connect(wxEVT_PAINT, wxPaintEventHandler(Pen::OnPaint));
  this->Centre();
}

void Pen::OnPaint(wxPaintEvent&amp; event)
{
  wxPaintDC dc(this);

  wxColour col1, col2;

  col1.Set(wxT("#0c0c0c"));
  col2.Set(wxT("#000000"));

  wxBrush brush(wxColour(255, 255, 255), wxTRANSPARENT);
  dc.SetBrush(brush);

  dc.SetPen(wxPen(col1, 1, wxSOLID));
  dc.DrawRectangle(10, 15, 90, 60);

  dc.SetPen(wxPen(col1, 1, wxDOT));
  dc.DrawRectangle(130, 15, 90, 60);

  dc.SetPen(wxPen(col1, 1, wxLONG_DASH));
  dc.DrawRectangle(250, 15, 90, 60);

  dc.SetPen(wxPen(col1, 1, wxSHORT_DASH));
  dc.DrawRectangle(10, 105, 90, 60);

  dc.SetPen(wxPen(col1, 1, wxDOT_DASH));
  dc.DrawRectangle(130, 105, 90, 60);

  dc.SetPen(wxPen(col1, 1, wxTRANSPARENT));
  dc.DrawRectangle(250, 105, 90, 60);
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "pen.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{
  Pen *pen = new Pen(wxT("Pen"));
  pen->Show(true);

  return true;
}

</pre>

<p>
In our example, we draw 6 rectangles with different pen styles. 
The last one is transparent, not visible. 
</p>

<pre class="explanation">
 dc.SetPen(wxPen(col1, 1, wxSOLID));
 dc.DrawRectangle(10, 15, 90, 60);
</pre>

<p>
Here we define a pen for our first rectangle. We set a pen with color col1 (#0c0c0c), 1 pixel wide, solid. 
The <i>DrawRectangle()</i> method draws the rectangle.
</p>


<img src="/img/gui/wxwidgets/pen.png" alt="Pen">
<div class="figure">Figure: Pen</div>


<h2>Regions</h2>

<p>
Regions can be combined to create more complex shapes. We can use four set 
operations. <i>Union</i>, <i>Intersect</i>, <i>Substract</i> and <i>Xor</i>.
The following example shows all four operations in action. 
</p>

<div class="codehead">Regions.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Regions : public wxFrame
{
public:
  Regions(const wxString &amp; title);

  void OnPaint(wxPaintEvent &amp; event);

};
</pre>


<div class="codehead">Regions.cpp</div>
<pre class="code">
#include "Regions.h"


Regions::Regions(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 220))
{
  this->Connect(wxEVT_PAINT, wxPaintEventHandler(Regions::OnPaint));
  this->Centre();
}

void Regions::OnPaint(wxPaintEvent &amp; event)
{
  wxPaintDC dc(this);
  wxColour gray, white, red, blue;
  wxColour orange, green, brown;

  gray.Set(wxT("#d4d4d4"));
  white.Set(wxT("#ffffff"));
  red.Set(wxT("#ff0000"));
  orange.Set(wxT("#fa8e00"));
  green.Set(wxT("#619e1b"));
  brown.Set(wxT("#715b33"));
  blue.Set(wxT("#0d0060"));
 
  dc.SetPen(wxPen(gray));

  dc.DrawRectangle(20, 20, 50, 50);
  dc.DrawRectangle(30, 40, 50, 50);

  dc.SetBrush(wxBrush(white));
  dc.DrawRectangle(100, 20, 50, 50);
  dc.DrawRectangle(110, 40, 50, 50); 
  wxRegion region1(100, 20, 50, 50);
  wxRegion region2(110, 40, 50, 50);
  region1.Intersect(region2);
  wxRect rect1 = region1.GetBox();
  dc.SetClippingRegion(region1);
  dc.SetBrush(wxBrush(red));
  dc.DrawRectangle(rect1);
  dc.DestroyClippingRegion();

  dc.SetBrush(wxBrush(white));
  dc.DrawRectangle(180, 20, 50, 50);
  dc.DrawRectangle(190, 40, 50, 50);
  wxRegion region3(180, 20, 50, 50);
  wxRegion region4(190, 40, 50, 50);
  region3.Union(region4);
  dc.SetClippingRegion(region3);
  wxRect rect2 = region3.GetBox();
  dc.SetBrush(wxBrush(orange));
  dc.DrawRectangle(rect2);
  dc.DestroyClippingRegion();

  dc.SetBrush(wxBrush(white));
  dc.DrawRectangle(20, 120, 50, 50);
  dc.DrawRectangle(30, 140, 50, 50);
  wxRegion region5(20, 120, 50, 50);
  wxRegion region6(30, 140, 50, 50);
  region5.Xor(region6);
  wxRect rect3 = region5.GetBox();
  dc.SetClippingRegion(region5);
  dc.SetBrush(wxBrush(green));
  dc.DrawRectangle(rect3);
  dc.DestroyClippingRegion();

  dc.SetBrush(wxBrush(white));
  dc.DrawRectangle(100, 120, 50, 50);
  dc.DrawRectangle(110, 140, 50, 50);
  wxRegion region7(100, 120, 50, 50);
  wxRegion region8(110, 140, 50, 50);
  region7.Subtract(region8);
  wxRect rect4 = region7.GetBox();
  dc.SetClippingRegion(region7);
  dc.SetBrush(wxBrush(brown));
  dc.DrawRectangle(rect4);
  dc.DestroyClippingRegion();

  dc.SetBrush(white);
  dc.DrawRectangle(180, 120, 50, 50);
  dc.DrawRectangle(190, 140, 50, 50);
  wxRegion region9(180, 120, 50, 50);
  wxRegion region10(190, 140, 50, 50);
  region10.Subtract(region9);
  wxRect rect5 = region10.GetBox();
  dc.SetClippingRegion(region10);
  dc.SetBrush(wxBrush(blue));
  dc.DrawRectangle(rect5);
  dc.DestroyClippingRegion(); 
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "Regions.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{
  Regions *regions = new Regions(wxT("Regions"));
  regions->Show(true);

  return true;
}

</pre>

<img src="/img/gui/wxwidgets/regions.png" alt="Regions">
<div class="figure">Figure: Regions</div>


<h2>Gradient</h2>

<p>
In computer graphics, gradient is a smooth blending of shades from light to 
dark or from one color to another. In 2D drawing programs and paint programs, 
gradients are used to create colorful backgrounds and special effects as well 
as to simulate lights and shadows. (answers.com)
</p>

<pre class="definition">
  void GradientFillLinear(const wxRect&amp; rect, const wxColour&amp; initialColour, 
       const wxColour&amp; destColour, wxDirection nDirection = wxEAST)
</pre>

<p>
This method fills the area specified by a rect with a linear gradient, starting 
from initialColour and eventually fading to destColour. The nDirection parameter 
specifies the direction of the colour change, the default value is wxEAST. 
</p>

<div class="codehead">gradient.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Gradient : public wxFrame
{
public:
  Gradient(const wxString&amp; title);

  void OnPaint(wxPaintEvent&amp; event);

};
</pre>


<div class="codehead">gradient.cpp</div>
<pre class="code">
#include "gradient.h"


Gradient::Gradient(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(220, 260))
{
  this->Connect(wxEVT_PAINT, wxPaintEventHandler(Gradient::OnPaint));
  this->Centre();
}

void Gradient::OnPaint(wxPaintEvent&amp; event)
{
  wxPaintDC dc(this);


  wxColour col1, col2;

  col1.Set(wxT("#e12223"));
  col2.Set(wxT("#000000"));

  dc.GradientFillLinear(wxRect(20, 20, 180, 40), col1, col2, wxNORTH);
  dc.GradientFillLinear(wxRect(20, 80, 180, 40), col1, col2, wxSOUTH);
  dc.GradientFillLinear(wxRect(20, 140, 180, 40), col1, col2, wxEAST);
  dc.GradientFillLinear(wxRect(20, 200, 180, 40), col1, col2, wxWEST);  
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "gradient.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{
  Gradient *grad = new Gradient(wxT("Gradient"));
  grad->Show(true);

  return true;
}
</pre>

<img src="/img/gui/wxwidgets/gradient.png" alt="Gradient">
<div class="figure">Figure: Gradient</div>


<h2>Shapes</h2>

<p>
Shapes are more sophisticated geometrical objects. We will draw various 
geometrical shapes in the following example.
</p>

<div class="codehead">shapes.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Shapes : public wxFrame
{
public:
    Shapes(const wxString &amp; title);

    void OnPaint(wxPaintEvent &amp; event);

};
</pre>

<div class="codehead">shapes.cpp</div>
<pre class="code">
#include "shapes.h"


Shapes::Shapes(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(350, 300))
{
  this->Connect(wxEVT_PAINT, wxPaintEventHandler(Shapes::OnPaint));
  this->Centre();
}

void Shapes::OnPaint(wxPaintEvent&amp; event)
{
  wxPaintDC dc(this);
 
  wxPoint lines[] = { wxPoint(20, 260), wxPoint(100, 260), 
          wxPoint(20, 210), wxPoint(100, 210) };
  wxPoint polygon[] = { wxPoint(130, 140), wxPoint(180, 170), 
          wxPoint(180, 140), wxPoint(220, 110), wxPoint(140, 100) };
  wxPoint splines[] = { wxPoint(240, 170), wxPoint(280, 170), 
          wxPoint(285, 110), wxPoint(325, 110) };
  
  dc.DrawEllipse(20, 20, 90, 60);
  dc.DrawRoundedRectangle(130, 20, 90, 60, 10);
  dc.DrawArc(240, 40, 340, 40, 290, 20);

  dc.DrawPolygon(4, polygon);
  dc.DrawRectangle(20, 120, 80, 50);
  dc.DrawSpline(4, splines);

  dc.DrawLines(4, lines);
  dc.DrawCircle(170, 230, 35);
  dc.DrawRectangle(250, 200, 60, 60);
  
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>


<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "shapes.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{

    Shapes *shapes = new Shapes(wxT("Shapes"));
    shapes->Show(true);

    return true;
}
</pre>


<img src="/img/gui/wxwidgets/shapes.png" alt="Shapes">
<div class="figure">Figure: Shapes</div>

<p>
In this chapter, we covered GDI in wxWidgets. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">

<a href="/">ZetCode</a>  last modified August 16, 2007  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
